<template>
    <div class="inviteFriends">
        <div class="title">
            <i class="iconfont iconzuojiantou" @click="onClickLeft"></i>
            <i ></i>
        </div>
        <div class="inviteFriendsCode">
            <img src="../assets/invite/newInvite.png" alt="" class="CodeOne">
            <img src="../assets/invite/QRcodeOne.png" alt="" class="QRcodeOne">
            <div class="Code" ref="imageDom" id="posterHtml"> 
                <vue-qr :logoSrc="imageUrl" :text="text" :size="size" :margin="0"  id="vueqr" ></vue-qr>
            <!-- <vue-qr :text="downloadData.url" :margin="0" colorDark="#f67b29" colorLight="#fff" :logoSrc="downloadData.icon + '?cache'" :logoScale="0.3" :size="200"></vue-qr> -->
             <p>邀请码:{{invitationCode}}</p>
            </div>
           
            <img src="../assets/invite/QRcodeTwo.png" alt="" class="QRcodeTwo">
        </div>
        <div class="immediately">
            <button @click="showPopup">立即邀请</button>
        </div>
        <!-- 弹出层 -->
        <van-popup round v-model="show" position="bottom" :style="{ height: '18%' }">
           <div class="shareStyle"> 
               <ul>
                    <li @click="shareFriend">
                        <img src="../assets/invite/weixin.png" alt="" class="shareOne" >
                        <span>微信</span>
                    </li>
                    <li>
                        <img src="../assets/invite/pengyouquan.png" alt="" class="shareTwo" @click="WXSceneTimeline">
                        <span>朋友圈</span>
                    </li>
                    <li @click="createPoster">
                        <img src="../assets/invite/bendi.png" alt="" class="shareThree" ref='imgs'>
                        <span>下载图片</span>
                    </li>
                    <li v-clipboard:copy="invitationCode" v-clipboard:success="onCopy" v-clipboard:error="onError">
                        <img src="../assets/invite/copy.png" alt="" class="shareFouse">
                        <span >复制邀请码</span>
                    </li>
               </ul>
           </div>
        </van-popup>
        <img :src="urlImg" alt="">
    </div>
</template>
<script>
import vueQr from 'vue-qr';
import html2canvas from 'html2canvas';
import {Toast} from "vant";
import { Popup } from 'vant';
export default {
    name: 'Queue',
    data() {
        return {
            imageUrl: require("../assets/Mymi/village.png"),
            size:0,
            text:"https://baidu.com",
            fullWidth:"",
            show:false,
            urlImg:"",
            formData:new FormData(),
            invitationCode:'',
            posterImg:''
        }
    },
    mounted() {
        var ww = document.body.clientWidth
        this.size = ww * 0.50666666;
        // // 监听浏览器返回
        if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', this.goBack, false);
        }
        // window.scrollBy(0,10);
        this.getCode();
    },
    destroyed(){
        // 销毁监听浏览器事件
        window.removeEventListener('popstate', this.goBack, false);
    },
    watch: {
     
    },
    methods: {
        //邀请码
        getCode(){
            this.$axios.post("/cct/invite/qrCode",{}).then(res =>{
                if(res.data.code==0){
                      this.invitationCode =res.data.data;
                }
            })
        },
        // 复制成功时的回调函数
        onCopy (e) {
            Toast("复制成功")
            this.show=false;
        },
        // 复制失败时的回调函数
        onError (e) {
           Toast("复制失败")
        },
        onClickLeft(){
            this.$router.push("/Mymi");
        },
        goBack(){
            this.$router.push("/Mymi");
        },
        showPopup() {
            this.show = true;
        },
        //微信好友分享
        shareFriend(){
            let t = this  //因为用的vue框架，这里需要用到this ，如果没有用可注释
        　　plus.share.getServices(function(e) {
            　　var shareData = e　　　　　　　　//这个回调函数的参数 e 就包含了 所有对象的数组
                // alert("123"+JSON.stringify(shareData))
        　　　　//在这个数组里 找到属于微信的对象 循环匹配查找
            　　for(let i = 0; i<e.length;i++){　　　　　　　　
                　　if('weixin' == e[i].id){
                    　　var sharewx = e[i]　　//保存到变量里 （之后即可使用该对象发起分享）
                        // alert("456"+JSON.stringify(sharewx))
                        t.WXindividual(sharewx);
                        // this.WXSce();
                       
                　　}
            　　}
        　　})
        },
        WXindividual(wx){
            var that=this;
            let msg = {
        　　　　type: 'web',　　//分享的内容的类型 
        　　　　title: '村村通',
        　　　　content: '我正在参与美丽村村通建设,快来加入我们吧!',
        　　　　thumbs: ['http://cct.kenhappvn.com/46f2795b-1326-4c5e-bb70-cb3cc217de19.png'],
        　　　　href: 'https://www.pgyer.com/8pGr',
        　　　　extra:{scene:"WXSceneSession"} // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
        　　}
            wx.send(msg, function() {
        　　　　console.log('分享成功')
                that.show=false;
        　　},function(error) {
        　　　　console.log('分享失败')
        　　})
        },
         //微信朋友圈分享
        WXSceneTimeline(){
            let t = this  //因为用的vue框架，这里需要用到this ，如果没有用可注释
        　　plus.share.getServices(function(e) {
            　　var shareData = e　　　　　　　　//这个回调函数的参数 e 就包含了 所有对象的数组
        　　　　//在这个数组里 找到属于微信的对象 循环匹配查找
            　　for(let i = 0; i<e.length;i++){　　　　　　　　
                　　if('weixin' == e[i].id){
                    　　var sharewx = e[i]　　//保存到变量里 （之后即可使用该对象发起分享）
                        t.WXFriends(sharewx);
                        
                　　}
            　　}
        　　})
        },
        WXFriends(wx){
            var that=this;
            let msg = {
        　　　　type: 'web',　　//分享的内容的类型 
        　　　　title: '村村通',
        　　　　content: '我正在参与美丽村村通建设,快来加入我们吧!',
        　　　　thumbs: ['http://cct.kenhappvn.com/46f2795b-1326-4c5e-bb70-cb3cc217de19.png'],
        　　　　href: 'https://www.pgyer.com/8pGr',
        　　　　extra:{scene:"WXSceneTimeline"} // 'WXSceneSession'分享给好友，'WXSceneTimeline'分享到朋友圈
        　　}
            wx.send(msg, function() {
        　　　　console.log('分享成功')
               that.show=false;
        　　},function(error) {
        　　　　console.log('分享失败')
        　　})
        },
         createPoster() {
            // 生成海报
            const vm = this
            const domObj = document.getElementById('posterHtml')
            html2canvas(domObj, {
                useCORS: true,
                allowTaint: false,
                logging: false,
                letterRendering: true,
                onclone(doc) {
                let e = doc.querySelector('#posterHtml')
                e.style.display = 'block';
                }
            }).then(function(canvas) {
                // 在微信里,可长按保存或转发
                Toast("正在下载中,请耐心等待")
                vm.posterImg = canvas.toDataURL('image/png');
                // vm.imgDown(vm.posterImg)
                vm.xiazai(vm.posterImg)
            })
            },
            //  imgDown (img) {
            //     var alink = document.createElement('a')
            //     alink.href = img
            //     alink.download = this.posterImgName // 图片名
            //     alink.click()
            // },
            // 保存到相册
               //下载图片
        xiazai(valUrl){
            var that=this;
            this.$axios.post('/cct/qny/baseImages',{
                base:valUrl
            }
            ).then(res => {
                var image = res.data.data
                plus.gallery.save(image, function () {//保存到相册方法
                    plus.nativeUI.closeWaiting()
                    var main = plus.android.runtimeMainActivity();   
                    var intent= plus.android.importClass('android.content.Intent');  
                    var Uri= plus.android.importClass('android.net.Uri');  
                    alert('已保存到手机相册');
                    that.show=false;
                }, function () {
                    // alert("2222")
                    plus.nativeUI.closeWaiting()
                    alert('保存失败，请重试！');
                });
	        });
           
        },
        // base64位转换成bold
        dataURLtoBlob(dataurl) {
            var arr = dataurl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length,
                u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
            console.log("456",new Blob([u8arr], { type: mime }))
            var objectURL = URL.createObjectURL(new Blob([u8arr], { type: mime }));
            console.log("123",objectURL)
            return new Blob([u8arr], { type: mime });
        },
      
    },
    components:{
        vueQr
    }
}
</script>
<style lang="less" scoped>
.inviteFriends{
    width: 100%;
    height: 100vh;
    background-image: url("../assets/invite/inviteBackground.png");
    background-size: 100% 100vh;
    font-size: 0;
    .title{
            width: 100%;
            font-size: 0.36rem;
            color:#333;
            height: 1.25rem;
            line-height: 1.25rem;
            display: flex;
            justify-content: space-between;
            padding: 0 0.2rem;
            box-sizing: border-box;
    }
    .inviteFriendsCode{
        width: 6.238rem;
        height: 5.7rem;
        background: white;
        margin: 3.65rem auto 0 auto;
        border-radius: 0.15rem;
        box-shadow: 0.04rem 0.04rem 0.04rem 0.04rem rgba(69,156,137 ,0.4);
        position: relative;
        .CodeOne{
            width: 1.80rem;
            height: 0.50rem;
            position: absolute;
            left: 2.141rem;
            top: -0.2rem;
        }
        .QRcodeOne{
            width: 0.37rem;
            height: 0.37rem;
            margin: 0.66rem 0rem 0rem 0.511rem;
        }
        .Code{
            // padding-left: 1.58rem;
            text-align: center;
            img{
                width: 3rem;
                height: 3rem;
            }
        }
        .QRcodeTwo{
            width: 0.37rem;
            height: 0.37rem;
            margin-left: 5.341rem;
        }
        p{
            font-size: 0.30rem;
            color:#333;
            text-align: center;
            margin-top:0.2rem;
        }
    }
    .immediately{
        button{
            width: 4.998rem;
            height: 0.8rem;
            background: #38A83F;
            border-radius: 0.1rem;
            font-size: 0.36rem;
            color: #FFFFFF;
            font-family: "PingFang-SC-Medium";
            margin: 0.558rem 1.245rem 0rem 1.245rem;
        }
    }
    .shareStyle{
        width: 100%;
        height: 1.95rem;
        margin-top: 0.45rem;
        ul{
            display: flex;
            li{
                width: 25%;
                font-size: 0.24rem;
                color: #333333;
                font-family: "PingFang-SC-Regular";
                align-items: center;
                img{
                    width: 1.1rem;
                    height: 1.1rem;
                    margin-left: 0.4rem;
                }
                span{
                    display: block;
                    text-align: center;
                    margin-top: 0.2rem;
                }
            }
        }
    }
}
</style>

